<template>
    <el-card class="box-card">
        <div slot="header" class="clearfix addTemplate-card-header">
            <!--<div class="addTemplate-close" id="addTemplateClose">
                <svg t="1732843898972" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4270" width="22" height="22"><path d="M576 512l277.333333 277.333333-64 64-277.333333-277.333333L234.666667 853.333333 170.666667 789.333333l277.333333-277.333333L170.666667 234.666667 234.666667 170.666667l277.333333 277.333333L789.333333 170.666667 853.333333 234.666667 576 512z" fill="#444444" p-id="4271"></path></svg>
                <span>
                    新建模板
                </span>
            </div>
            <div class="addTemplate-note">
                请确保所有文件都添加签署区
            </div>-->
            <div class="addTemplate-left">
                <div :class="{
                    'addTemplate-close-step2-margin':currentStep == 2,
                    'addTemplate-close':currentStep == 1 || currentStep == 3
                }" id="addTemplateClose">
                    <svg t="1732843898972" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="4270" width="22" height="22">
                        <path
                            d="M576 512l277.333333 277.333333-64 64-277.333333-277.333333L234.666667 853.333333 170.666667 789.333333l277.333333-277.333333L170.666667 234.666667 234.666667 170.666667l277.333333 277.333333L789.333333 170.666667 853.333333 234.666667 576 512z"
                            fill="#444444" p-id="4271"></path>
                    </svg>
                    <span>新建模板</span>
                </div>
                <div v-if="currentStep == 2" class="addTemplate-note">
                    <svg t="1734397949508" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="4266" width="22" height="22">
                        <path
                            d="M512 170.666667C324.266667 170.666667 170.666667 324.266667 170.666667 512s153.6 341.333333 341.333333 341.333333 341.333333-153.6 341.333333-341.333333S699.733333 170.666667 512 170.666667z m0 640c-164.266667 0-298.666667-134.4-298.666667-298.666667s134.4-298.666667 298.666667-298.666667 298.666667 134.4 298.666667 298.666667-134.4 298.666667-298.666667 298.666667z"
                            fill="#FA8C15" p-id="4267"></path>
                        <path
                            d="M512 448c-12.8 0-21.333333 8.533333-21.333333 21.333333v213.333334c0 10.666667 8.533333 21.333333 21.333333 21.333333s21.333333-8.533333 21.333333-21.333333V469.333333c0-10.666667-8.533333-21.333333-21.333333-21.333333zM512 320c-12.8 0-21.333333 10.666667-21.333333 21.333333v42.666667c0 12.8 8.533333 21.333333 21.333333 21.333333s21.333333-10.666667 21.333333-21.333333v-42.666667c0-12.8-8.533333-21.333333-21.333333-21.333333z"
                            fill="#FA8C15" p-id="4268"></path>
                    </svg>
                    <span>请确保所有文件都添加签署区</span>
                </div>
            </div>
            <div class="progress-container">
                <div class="step" id="stepOne" v-for="(item, index) in allSteps" :key="index">
                    <div v-if="item.state == 3" id="stepOneCircleDone" class="circle-done">
                        <svg t="1733983527863" class="icon" viewBox="0 0 1024 1024" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="3065" width="20" height="20">
                            <path
                                d="M159.405 462.713l218.634 218.634L859.54 196.055l94.784 94.151-580.076 583.236L69.676 568.87l89.729-106.157z"
                                p-id="3066" fill="#165DFF"></path>
                        </svg>
                    </div>
                    <div v-if="item.state != 3" id="stepOneCircle" :class="{
                        'circle': item.state == 1,
                        'circle-ing': item.state == 2,
                        'circle-done': item.state == 3
                    }">
                        {{ item.stepNum }}
                    </div>
                    <div id="stepOneText" :class="{
                        'text': item.state == 1,
                        'text-ing': item.state == 2,
                        'text-done': item.state == 3
                    }">{{ item.stepName }}
                    </div>
                    <div :class="{
                        'separator-done' : item.state == 3,
                        'separator' : item.state == 1 || item.state == 2
                    }" id="stepOneDoneSeparator" v-if="item.stepNum != 3"></div>
                </div>
            </div>
            <div class="optionButtons">
                <el-button size="medium" @click="changeSteps('prev')" v-if="currentStep != 1">上一步</el-button>
                <el-button size="medium">保存草稿</el-button>
                <el-button size="medium" type="primary" @click="changeSteps('next')">下一步</el-button>
            </div>
        </div>
        <div class="stepOneWrapper" v-if="currentStep == 1">
            <el-form :model="templateForm" :rules="templateRules" ref="templateForm" label-width="110px"
                     class="templateForms" size="medium">
                <el-form-item label="模板名称" prop="templateName" style="width: 40%">
                    <el-input v-model="templateForm.templateName"></el-input>
                </el-form-item>
                <el-form-item label="合同类型" prop="contractType">
                    <el-checkbox-group v-model="templateForm.contractType">
                        <el-checkbox label="合作合同" name="contractType"></el-checkbox>
                        <el-checkbox label="入围合同" name="contractType"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="合同等级" prop="contractLevel">
                    <el-checkbox-group v-model="templateForm.contractLevel">
                        <el-checkbox label="新合同" name="contractLevel"></el-checkbox>
                        <el-checkbox label="补充协议" name="contractLevel"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="签署对象类型" prop="signObjectType">
                    <el-checkbox-group v-model="templateForm.signObjectType">
                        <el-row>
                            <el-checkbox label="社会渠道" name="signObjectType"></el-checkbox>
                            <el-checkbox label="加盟店" name="signObjectType"></el-checkbox>
                            <el-checkbox label="直营店合作方" name="signObjectType"></el-checkbox>
                        </el-row>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="模板说明" prop="templateDesc" style="width: 45%">
                    <el-input :autosize="{ minRows: 6, maxRows: 8}" type="textarea"
                              v-model="templateForm.templateDesc"></el-input>
                </el-form-item>
                <el-form-item label="合同文件" prop="contractFiles" style="width: 45%">
                    <el-upload class="upload-demo"
                               :action="uploadUrl"
                               :before-upload="beforeUpload"
                               :on-change="handleChange"
                               :file-list="fileList"
                               :show-file-list="true"
                               :limit="10"
                               :on-success="handleSuccess"
                               :on-error="handleError"
                    >
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>

                <!--<el-form-item>
                    <el-button type="primary"  @click="submitForm('templateForm')">立即创建</el-button>
                    <el-button @click="resetForm('templateForm')">重置</el-button>
                </el-form-item>-->
            </el-form>
        </div>
        <!-- 第二步编辑 -->
        <div v-if="currentStep == 2" style="">
            <el-container style="height: 800px;">
                <!-- 左侧附件列表 -->
                <el-aside class="contract-file-aside-left">
                    <div class="contract-file-name-list">
                        <div class="contract-file-name-list-title">
                            文件列表:
                        </div>
                        <div class="contract-file-name-list-content">
                            <span v-for="(item,index) in contractFileList" :key="index">
                                <el-tooltip v-if="item.name.length > 16" class="item" effect="dark" :content="item.name"
                                            placement="right-start">
                                    <div :class="{
                                        'contract-file-name-list-content-name-active': item.checked,
                                        'contract-file-name-list-content-name': !item.checked,
                                    }" @click="switchContractFileName(item,index)">
                                        {{ item.name.length > 16 ? item.name.slice(0, 16) + '...' : item.name }}
                                    </div>
                                </el-tooltip>
                                <div v-else :class="{
                                        'contract-file-name-list-content-name-active':item.checked,
                                        'contract-file-name-list-content-name': !item.checked,
                                    }" @click="switchContractFileName(item,index)">
                                        {{ item.name }}
                                </div>
                            </span>
                        </div>
                    </div>
                    <!-- 合同缩略图列表 -->
                    <div class="contract-file-small-list" v-if="choosedContractFile">
                        <el-tooltip
                            v-if="choosedContractFile && choosedContractFile.name && choosedContractFile.name.length > 16"
                            class="item" effect="dark" :content="choosedContractFile.name" placement="right-start">
                            <div class="contract-file-small-list-title">
                                {{ choosedContractFile.name.length > 16 ? choosedContractFile.name.slice(0, 16) + '...' : choosedContractFile.name }}
                            </div>
                        </el-tooltip>
                        <div class="contract-file-small-list-title" v-else>
                            {{ choosedContractFile.name }}
                        </div>
                        <div class="contract-file-small-list-content">
                            <div class="contract-file-small-list-content-item-wrapper"
                                 v-for="(page,pageIndex) in choosedContractFile.pages" :key="pageIndex">
                                <div class="contract-file-small-list-content-item">
                                    <div @click="changeContractFileSmall(page,pageIndex)" :class="{
                                        'contract-file-small-list-content-item-left': !page.checked,
                                        'contract-file-small-list-content-item-left-active': page.checked
                                    }">
                                        <!-- 左侧文件缩略图内容 -->
                                    </div>
                                    <div class="contract-file-small-list-content-item-right">
                                        <span v-for="(control,controlIndex) in choosedContractFile.controls"
                                              :key="controlIndex">
                                            <el-tooltip v-if="control.name && control.name.length > 6" class="item"
                                                        effect="dark" :content="control.name" placement="right-start">
                                                <div :class="{
                                                    'contract-file-small-list-content-item-right-item': !page.checked,
                                                    'contract-file-small-list-content-item-right-item-active': page.checked
                                                }">
                                                    {{ control.name.length > 6 ? control.name.slice(0, 6) + '...' : control.name }}
                                                    <span v-if="page.checked"
                                                          @click="switchContractControls(control,controlIndex)"
                                                          class="contract-file-small-list-content-item-right-item-close">
                                                        <svg t="1734425356270"
                                                             class="contract-file-small-list-content-item-right-item-close-icon"
                                                             viewBox="0 0 1024 1024" version="1.1"
                                                             xmlns="http://www.w3.org/2000/svg" p-id="3119" width="16"
                                                             height="16"><path
                                                            d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024zM512 96a416 416 0 1 0 0 832 416 416 0 0 0 0-832z m176 640a47.68 47.68 0 0 1-33.92-14.08L512 579.904 369.92 721.92a48 48 0 0 1-67.84-67.84L444.096 512 302.08 369.92a48 48 0 0 1 67.84-67.84L512 444.096l142.08-142.016a48 48 0 0 1 67.84 67.84L579.904 512l142.016 142.08a48 48 0 0 1-33.92 81.92z"
                                                            fill="#515151" p-id="3120"></path></svg>
                                                    </span>
                                                </div>
                                            </el-tooltip>
                                            <div v-else :class="{
                                                    'contract-file-small-list-content-item-right-item': !page.checked,
                                                    'contract-file-small-list-content-item-right-item-active': page.checked
                                                }">
                                                    {{ control.name }}
                                                    <span v-if="page.checked"
                                                          @click="switchContractControls(control,controlIndex)"
                                                          class="contract-file-small-list-content-item-right-item-close">
                                                        <svg t="1734425356270"
                                                             class="contract-file-small-list-content-item-right-item-close-icon"
                                                             viewBox="0 0 1024 1024" version="1.1"
                                                             xmlns="http://www.w3.org/2000/svg" p-id="3119" width="16"
                                                             height="16"><path
                                                            d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024zM512 96a416 416 0 1 0 0 832 416 416 0 0 0 0-832z m176 640a47.68 47.68 0 0 1-33.92-14.08L512 579.904 369.92 721.92a48 48 0 0 1-67.84-67.84L444.096 512 302.08 369.92a48 48 0 0 1 67.84-67.84L512 444.096l142.08-142.016a48 48 0 0 1 67.84 67.84L579.904 512l142.016 142.08a48 48 0 0 1-33.92 81.92z"
                                                            fill="#515151" p-id="3120"></path></svg>
                                                    </span>
                                                </div>
                                        </span>
                                    </div>
                                </div>
                                <div :class="{
                                        'contract-file-small-list-content-item-page': !page.checked,
                                        'contract-file-small-list-content-item-page-active': page.checked
                                    }">
                                    {{ pageIndex + 1 }}/{{ choosedContractFile.pages.length }}
                                </div>
                            </div>
                        </div>
                    </div>

                </el-aside>

                <el-main class="main-file-pane">
                    <div class="a4-container">

                    </div>
                </el-main>

                <el-aside class="contract-file-aside-right">
                    <el-tabs v-model="rightControlsAreaActive" @tab-click="handleRightControlsAreaActive">
                        <el-tab-pane label="添加组件" name="addControl" class="right-tab-pane">
                            <el-collapse v-model="rightControlsAreaCollapse" @change="handleRightControlsAreaCollapse">
                                <el-collapse-item v-for="(title, titleIndex) in rightControlsContentList"
                                                  :key="titleIndex" :name="title.code">
                                    <template #title>
                                        <svg t="1734521487306" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                             xmlns="http://www.w3.org/2000/svg" p-id="6183" width="16" height="18">
                                            <path
                                                d="M512 26.56a116.544 116.544 0 0 0-116.512 116.512V880.96a116.512 116.512 0 0 0 233.024 0V143.072A116.544 116.544 0 0 0 512 26.56z"
                                                fill="#0052D9" p-id="6184"></path>
                                        </svg>
                                        <span style="font-weight: bold;font-size: 14px;">{{ title.name }}</span>
                                    </template>
                                    <div class="right-tab-pane-drag-content">
                                        <div class="right-tab-pane-drag-content-item"
                                             v-for="(content,contentIndex) in title.subContent" :key="contentIndex">
                                            {{ content.name }}
                                        </div>
                                    </div>
                                </el-collapse-item>
                            </el-collapse>
                        </el-tab-pane>
                        <el-tab-pane label="添加水印" name="addWaterMark" class="right-tab-pane">
                            <el-form label-position="top" label-width="80px" :model="rightWaterMarker">
                                <el-form-item label="水印信息" style="--el-form-item-label-color: #78818D;">
                                    <el-radio-group v-model="rightWaterMarker.waterMarkerInfo">
                                        <!-- 纵向排列的 Radio -->
                                        <div class="radio-item">
                                            <el-radio label="none">无水印</el-radio>
                                        </div>
                                        <div class="radio-item">
                                            <el-radio label="visitor">访问者信息</el-radio>
                                            <div class="radio-description" aria-describedby="radio-description-diy">
                                                在线查看合同时会显示访问者姓名和手机尾号
                                            </div>
                                        </div>
                                        <div class="radio-item">
                                            <el-radio label="diy">自定义内容</el-radio>
                                            <div class="radio-description" aria-describedby="radio-description-diy">
                                                在线查看和下载的合同会显示自定义的水印内容
                                            </div>
                                        </div>
                                    </el-radio-group>
                                </el-form-item>

                                <el-form-item v-if="rightWaterMarker.waterMarkerInfo == 'diy'">
                                    <template #label>
                                        <span style="color: #78818D;">文字内容<span style="color:red;">*</span></span>
                                    </template>
                                    <el-input maxlength="15" show-word-limit
                                              v-model="rightWaterMarker.waterMarkerText"></el-input>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>
                </el-aside>
            </el-container>
        </div>
        <!-- 第三步-预览 -->
        <div v-if="currentStep == 3" style="">
            <el-container style="height: 800px;">
                <!-- 左侧附件列表 -->
                <el-aside class="contract-file-aside-left">
                    <div class="contract-file-name-list">
                        <div class="contract-file-name-list-title">
                            文件列表:
                        </div>
                        <div class="contract-file-name-list-content">
                            <span v-for="(item,index) in contractFileList" :key="index">
                                <el-tooltip v-if="item.name.length > 16" class="item" effect="dark" :content="item.name"
                                            placement="right-start">
                                    <div :class="{
                                        'contract-file-name-list-content-name-active': item.checked,
                                        'contract-file-name-list-content-name': !item.checked,
                                    }" @click="switchContractFileName(item,index)">
                                        {{ item.name.length > 16 ? item.name.slice(0, 16) + '...' : item.name }}
                                    </div>
                                </el-tooltip>
                                <div v-else :class="{
                                        'contract-file-name-list-content-name-active':item.checked,
                                        'contract-file-name-list-content-name': !item.checked,
                                    }" @click="switchContractFileName(item,index)">
                                        {{ item.name }}
                                </div>
                            </span>
                        </div>
                    </div>
                    <!-- 合同缩略图列表 -->
                    <div class="contract-file-small-list" v-if="choosedContractFile">
                        <el-tooltip
                            v-if="choosedContractFile && choosedContractFile.name && choosedContractFile.name.length > 16"
                            class="item" effect="dark" :content="choosedContractFile.name" placement="right-start">
                            <div class="contract-file-small-list-title">
                                {{ choosedContractFile.name.length > 16 ? choosedContractFile.name.slice(0, 16) + '...' : choosedContractFile.name }}
                            </div>
                        </el-tooltip>
                        <div class="contract-file-small-list-title" v-else>
                            {{ choosedContractFile.name }}
                        </div>
                        <div class="contract-file-small-list-content">
                            <div class="contract-file-small-list-content-item-wrapper"
                                 v-for="(page,pageIndex) in choosedContractFile.pages" :key="pageIndex">
                                <div class="contract-file-small-list-content-item">
                                    <div @click="changeContractFileSmall(page,pageIndex)" :class="{
                                        'contract-file-small-list-content-item-left': !page.checked,
                                        'contract-file-small-list-content-item-left-active': page.checked
                                    }">
                                        <!-- 左侧文件缩略图内容 -->
                                    </div>
                                    <div class="contract-file-small-list-content-item-right">
                                        <span v-for="(control,controlIndex) in choosedContractFile.controls"
                                              :key="controlIndex">
                                            <el-tooltip v-if="control.name && control.name.length > 6" class="item"
                                                        effect="dark" :content="control.name" placement="right-start">
                                                <div :class="{
                                                    'contract-file-small-list-content-item-right-item': !page.checked,
                                                    'contract-file-small-list-content-item-right-item-active': page.checked
                                                }">
                                                    {{ control.name.length > 6 ? control.name.slice(0, 6) + '...' : control.name }}
                                                    <span v-if="page.checked  && currentStep != 3"
                                                          @click="switchContractControls(control,controlIndex)"
                                                          class="contract-file-small-list-content-item-right-item-close">
                                                        <svg t="1734425356270"
                                                             class="contract-file-small-list-content-item-right-item-close-icon"
                                                             viewBox="0 0 1024 1024" version="1.1"
                                                             xmlns="http://www.w3.org/2000/svg" p-id="3119" width="16"
                                                             height="16"><path
                                                            d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024zM512 96a416 416 0 1 0 0 832 416 416 0 0 0 0-832z m176 640a47.68 47.68 0 0 1-33.92-14.08L512 579.904 369.92 721.92a48 48 0 0 1-67.84-67.84L444.096 512 302.08 369.92a48 48 0 0 1 67.84-67.84L512 444.096l142.08-142.016a48 48 0 0 1 67.84 67.84L579.904 512l142.016 142.08a48 48 0 0 1-33.92 81.92z"
                                                            fill="#515151" p-id="3120"></path></svg>
                                                    </span>
                                                </div>
                                            </el-tooltip>
                                            <div v-else :class="{
                                                    'contract-file-small-list-content-item-right-item': !page.checked,
                                                    'contract-file-small-list-content-item-right-item-active': page.checked
                                                }">
                                                    {{ control.name }}
                                                    <span v-if="page.checked && currentStep != 3"
                                                          @click="switchContractControls(control,controlIndex)"
                                                          class="contract-file-small-list-content-item-right-item-close">
                                                        <svg t="1734425356270"
                                                             class="contract-file-small-list-content-item-right-item-close-icon"
                                                             viewBox="0 0 1024 1024" version="1.1"
                                                             xmlns="http://www.w3.org/2000/svg" p-id="3119" width="16"
                                                             height="16"><path
                                                            d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024zM512 96a416 416 0 1 0 0 832 416 416 0 0 0 0-832z m176 640a47.68 47.68 0 0 1-33.92-14.08L512 579.904 369.92 721.92a48 48 0 0 1-67.84-67.84L444.096 512 302.08 369.92a48 48 0 0 1 67.84-67.84L512 444.096l142.08-142.016a48 48 0 0 1 67.84 67.84L579.904 512l142.016 142.08a48 48 0 0 1-33.92 81.92z"
                                                            fill="#515151" p-id="3120"></path></svg>
                                                    </span>
                                                </div>
                                        </span>
                                    </div>
                                </div>
                                <div :class="{
                                        'contract-file-small-list-content-item-page': !page.checked,
                                        'contract-file-small-list-content-item-page-active': page.checked
                                    }">
                                    {{ pageIndex + 1 }}/{{ choosedContractFile.pages.length }}
                                </div>
                            </div>
                        </div>
                    </div>

                </el-aside>

                <el-main style="background-color: #3F51B5;">
                </el-main>

                <el-aside class="contract-file-aside-right">
                </el-aside>
            </el-container>
        </div>
    </el-card>
</template>

<script>
import {_queryTemplateDetail} from "@/views/pc/request";

export default {
    name: 'fillTemplate',
    data() {
        return {
            allSteps: [
                {
                    stepNum: 1,
                    stepName: '填写基本信息',
                    /*state:1-灰色-未执行到 2-蓝色-正在执行 3-蓝色-执行完毕*/
                    state: 2,
                },
                {
                    stepNum: 2,
                    stepName: '文件添加填写区/签署区',
                    state: 1
                },
                {
                    stepNum: 3,
                    stepName: '预览',
                    state: 1
                }
            ],
            currentStep: 1,
            templateForm: {
                templateName: '',
                contractType: [],
                contractLevel: [],
                signObjectType: [],
                templateDesc: '',
                contractFiles: []
            },
            templateRules: {
                templateName: [
                    {required: true, message: '请输入模板名称', trigger: 'blur'},
                    {min: 1, max: 300, message: '模板名称不能超过300字', trigger: 'blur'}
                ],
                contractType: [
                    {type: 'array', required: true, message: '请至少选择一个合同类型', trigger: 'change'}
                ],
                contractLevel: [
                    {type: 'array', required: true, message: '请至少选择一个合同等级', trigger: 'change'}
                ],
                signObjectType: [
                    {type: 'array', required: true, message: '请至少选择一个签署对象类型', trigger: 'change'}
                ],
                templateDesc: [
                    /*{ required: true, message: '请填写活动形式', trigger: 'blur' },*/
                    {max: 500, message: '模板名称不能超过500字', trigger: 'blur'}
                ]
            },
            //上传的文件列表
            fileList: [{
                name: 'food.jpeg',
                url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
            }, {
                name: 'food2.jpeg',
                url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
            }],
            uploadUrl: '/mock-upload', // Mock 上传接口
            // 签署区的文件列表 控件
            contractFileList: [
                {
                    id: 0,
                    name: '合同附件0',
                    content: 'html0',
                    pages: [{id: 1, content: '1'}, {id: 2, content: '2'}],
                    controls: [{id: 1, name: '测试控件甲方公司名称1'}, {id: 2, name: '测试控件甲方公司名称2'}, {
                        id: 3,
                        name: '控件3'
                    }]
                },
                {
                    id: 1,
                    name: '合同附件1合同附件1合同附件1合同附件1合同附件1',
                    content: 'html1',
                    pages: [{id: 1, content: '1'}, {id: 2, content: '2'}, {id: 3, content: '3'}, {id: 4, content: '4'}],
                    controls: [{id: 1, name: '测试控件甲方公司名称1'}, {id: 2, name: '测试控件甲方公司名称2'}, {
                        id: 3,
                        name: '控件3'
                    }, {id: 4, name: '控件4'}, {id: 5, name: '控件5'}, {id: 6, name: '控件6'}]
                },
                {
                    id: 2,
                    name: '合同附件2',
                    content: 'html2',
                    pages: [{id: 1, content: '1'}, {id: 2, content: '2'}],
                    controls: [{id: 1, name: '测试控件甲方公司名称1'}, {id: 2, name: '测试控件甲方公司名称2'}, {
                        id: 3,
                        name: '控件3'
                    }]
                },
                {
                    id: 3,
                    name: '合同附件3',
                    content: 'html3',
                    pages: [{id: 1, content: '1'}, {id: 2, content: '2'}, {id: 3, content: '3'}],
                    controls: [{id: 1, name: '测试控件甲方公司名称1'}, {id: 2, name: '测试控件甲方公司名称2'}, {
                        id: 3,
                        name: '控件3'
                    }]
                },
                {
                    id: 4,
                    name: '合同附件4',
                    content: 'html4',
                    pages: [{id: 1, content: '1'}],
                    controls: [{id: 1, name: '测试控件甲方公司名称1'}, {id: 2, name: '测试控件甲方公司名称2'}, {
                        id: 3,
                        name: '控件3'
                    }]
                },
                {
                    id: 5,
                    name: '合同附件5',
                    content: 'html5',
                    pages: [{id: 1, content: '1'}, {id: 2, content: '2'}, {id: 4, content: '4'}],
                    controls: [{id: 1, name: '测试控件甲方公司名称1'}, {id: 2, name: '测试控件甲方公司名称2'}, {
                        id: 3,
                        name: '控件3'
                    }]
                },
                {
                    id: 6,
                    name: '合同附件6',
                    content: 'html6',
                    pages: [{id: 1, content: '1'}, {id: 4, content: '4'}],
                    controls: [{id: 1, name: '测试控件甲方公司名称1'}, {id: 2, name: '测试控件甲方公司名称2'}, {
                        id: 3,
                        name: '控件3'
                    }]
                },
            ],
            choosedContractFile: undefined,
            choosedContractFileIndex: undefined,

            rightControlsAreaActive: 'addControl',
            rightControlsAreaCollapse: [],

            rightControlsContentList: [
                {
                    pid: 0,
                    id: 1,
                    name: '渠道信息',
                    code: 'channelInfo',
                    subContent: [{pid: 1, id: 1, name: '渠道编码', code: 'channelCode'}, {
                        pid: 1,
                        id: 2,
                        name: '渠道名称',
                        code: 'channelName'
                    }, {pid: 1, id: 3, name: '渠道地址', code: 'channelAddress'}]
                },
                {
                    pid: 0,
                    id: 2,
                    name: '合作商信息',
                    code: 'partnerInfo',
                    subContent: [{pid: 2, id: 1, name: '企业全称', code: 'partnerName'}, {
                        pid: 1,
                        id: 2,
                        name: '统一社会信用代码',
                        code: 'agentSocialCreditNum'
                    }, {pid: 1, id: 3, name: '法人/经营者姓名', code: 'agentLegalPerson'}, {
                        pid: 1,
                        id: 4,
                        name: '法人/经营者手机号',
                        code: 'agentLegalPersonPhone'
                    }, {pid: 1, id: 5, name: '法人/经营者证件类型', code: 'agentPaperType'}, {
                        pid: 1,
                        id: 6,
                        name: '法人/经营者证件号码',
                        code: 'agentPaperNum'
                    }]
                },
                {
                    pid: 0,
                    id: 3,
                    name: '银行信息',
                    code: 'bankInfo',
                    subContent: [{pid: 3, id: 1, name: '银联号', code: 'bankUnionCode'}, {
                        pid: 3,
                        id: 2,
                        name: '网点名称',
                        code: 'branchBankName'
                    }, {pid: 3, id: 3, name: '开户行名称', code: 'bankName'}, {
                        pid: 3,
                        id: 4,
                        name: '银行账户',
                        code: 'acctNo'
                    }, {pid: 3, id: 5, name: '银行户名', code: 'acctName'}, {
                        pid: 3,
                        id: 6,
                        name: '费用短信号码',
                        code: 'acctSmsPhone'
                    }, {pid: 3, id: 7, name: '供应商名称', code: 'supplier'}]
                },
                {
                    pid: 0,
                    id: 4,
                    name: '合同有效期',
                    code: 'contractExpireDate',
                    subContent: [{pid: 4, id: 1, name: '合同履行期限', code: 'channelCode'}]
                },
                {
                    pid: 0,
                    id: 5,
                    name: '签署区',
                    code: 'signArea',
                    subContent: [{pid: 5, id: 1, name: '个人签名', code: 'personSign'}, {
                        pid: 5,
                        id: 2,
                        name: '甲方企业印章',
                        code: 'jiaSeal'
                    }, {pid: 5, id: 3, name: '乙方企业印章', code: 'yiSeal'}, {
                        pid: 5,
                        id: 4,
                        name: '骑缝章',
                        code: 'sewingSeal'
                    }]
                },
            ],

            rightWaterMarker: {
                waterMarkerInfo: 'none',
                waterMarkerText: undefined,
            },
        }
    },
    methods: {
        hello() {
            console.log('hello')
        },
        changeSteps(type) {
            if (type == 'next') {

                if (this.currentStep == 2) {
                    if (this.rightWaterMarker.waterMarkerInfo == 'diy' && !this.rightWaterMarker.waterMarkerText) {
                        this.$message({
                            message: '您选择了自定义水印，请填写自定义水印内容!',
                            type: 'error',
                            duration: 5000,
                            //showClose: true,
                        });
                        return false;
                    }
                }

                if (this.ccurrentStep >= 3) return false;
                this.currentStep++;
                /*this.$refs['templateForm'].validate((valid) => {
                    if (!valid) {
                        alert('error submit!');
                        console.log('error submit!!');
                        return false;
                    }
                    this.currentStep++;

                    const steps = this.allSteps;
                    if (this.currentStep === 1) {
                        steps[0].state = 2;
                        steps[1].state = 1;
                        steps[2].state = 1;
                    } else if (this.currentStep === 2) {
                        steps[0].state = 3;
                        steps[1].state = 2;
                        steps[2].state = 1;
                    } else if (this.currentStep === 3) {
                        steps[0].state = 3;
                        steps[1].state = 3;
                        steps[2].state = 2;
                    }
                });*/
            } else if (type == 'prev') {
                if (this.ccurrentStep <= 1) return false;
                this.currentStep--;
            } else {
                this.currentStep = type;
            }
            const steps = this.allSteps;
            if (this.currentStep === 1) {
                steps[0].state = 2;
                steps[1].state = 1;
                steps[2].state = 1;
            } else if (this.currentStep === 2) {
                steps[0].state = 3;
                steps[1].state = 2;
                steps[2].state = 1;
            } else if (this.currentStep === 3) {
                steps[0].state = 3;
                steps[1].state = 3;
                steps[2].state = 2;
            }
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        handleChange(file, fileList) {
            console.log('file', file);
            console.log('fileList', fileList);
            //this.fileList = fileList.slice(-3);
        },
        beforeUpload(file) {
            const isWord = /\.(docx?|pdf)$/.test(file.name);
            if (!isWord) {
                this.$message.error('只能上传 Word 或 PDF 文件');
                return false; // 取消上传
            }
            const isLt10M = file.size / 1024 / 1024 < 10;
            if (!isLt10M) {
                this.$message.error('文件大小不能超过 10MB');
                return false; // 取消上传
            }

            // 返回 false 阻止自动上传行为，已在 mockUpload 中手动上传
            return false;
        },
        // 文件上传成功后处理
        handleSuccess(response, file, fileList) {
            console.log('上传成功', response);
            console.log('fileList', fileList);
            // 保持上传文件的状态，确保文件仍然在列表中
            file.status = 'success'; // 设置上传成功状态
            file.url = response.link; // 假设响应中返回了文件链接
        },

        // 文件上传失败处理
        handleError(err, file, fileList) {
            console.error('上传失败', err);
            console.error('fileList', fileList);
            file.status = 'failed'; // 设置上传失败状态
        },

        //签署区域 点击左侧文件列表名称显示文件缩略图
        switchContractFileName(item, index) {
            if (!item.checked) {
                this.contractFileList.forEach(file => {
                    file.checked = false;
                });
                item.checked = true;
            } else {
                item.checked = false; // 如果点击的已经是选中的项，则取消选中
            }
            console.log('显示文件缩略：：：', item)
            this.choosedContractFile = item;
            this.choosedContractFileIndex = index;
        },
        changeContractFileSmall(page, pageIndex) {
            console.log('点击缩略图：：', page, pageIndex)
            let contract = this.contractFileList[this.choosedContractFileIndex];
            if (contract) {
                // 遍历该合同附件下的所有页面，设置 checked 为 false
                contract.pages.forEach(page => {
                    page.checked = false; // 先将所有页面的 checked 设置为 false
                });

                // 找到选中的页面并设置其 checked 为 true
                let selectedPage = contract.pages[pageIndex];
                if (selectedPage) {
                    selectedPage.checked = true;
                    console.log(`合同附件 ${this.choosedContractFileIndex} 的页面 ${pageIndex} 被选中，checked 状态：`, selectedPage.checked);
                }
                this.choosedContractFile = undefined;
                this.choosedContractFile = contract;
            }
        },
        switchContractControls(control, controlIndex) {
            console.log(`点击删除控件的x号，合同附件的下标为：${this.choosedContractFileIndex},控件的下标为：${controlIndex}，控件内容为：${JSON.stringify(control)}`)
        },

        handleRightControlsAreaActive(tab, event) {
            console.log(tab, event);
            console.log(this.rightControlsAreaActive)
        },
        handleRightControlsAreaCollapse(val) {
            console.log(val);
        },
    },
    mounted() {
        console.log('mounted触发！')
    },
    created() {
        var param = {
            templateId:1
        }
        /*_queryTemplateDetail(param).then((res) => {
            console.log('ress',res)
        });*/

        const axios = require('axios');
        const url = '/api/contract/template/detail';
        axios.post(url, param)
            .then(response => {
                console.log('响应数据:', response); // 成功回调
            })
            .catch(error => {
                console.error('错误:', error); // 错误回调
            });


        //todo: 接口对完后都要写到对应的请求下
        //默认选中左侧的文件名和文件缩略图
        this.contractFileList.forEach(item => {
            item.checked = false; // 初始值为 false
            item.pages.forEach(page => {
                page.checked = false;
            })
            item.pages[0].checked = true;
        });
        this.contractFileList[0].checked = true;
        this.choosedContractFile = this.contractFileList[0];
        this.choosedContractFileIndex = 0;

        //默认打开右侧的collapse
        this.rightControlsContentList.forEach(item => {
            this.rightControlsAreaCollapse.push(item.code)
        })

        console.log('created触发！')
        this.hello();
        this.changeSteps(1)
    },
    computed: {},
    watch: {}
}
</script>

<style scoped>
.el-card__header {
    padding: 5px 20px !important;
}

.addTemplate-card-header {
    /*padding: 0 15px;*/
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.addTemplate-left {
    display: flex;
    flex-direction: column; /* 垂直排列子元素 */
    align-items: flex-start;
}

.addTemplate-close {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    text-align: left;
}

.addTemplate-close-step2-margin {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    text-align: left;
}

.addTemplate-note {
    font-weight: 400;
    line-height: 18px;
    color: #FA8C15;
    font-size: 12px;
    margin-top: 5px;
    display: flex;
    align-items: center;
    margin-left: 27px;
}

.progress-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*width: 600px;*/
    margin: 15px 0;
}

.progress-container .step {
    display: flex;
    align-items: center;
}

.progress-container .circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgb(242, 243, 245);
    color: rgba(3, 3, 3, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    margin-right: 10px; /* 调整文字和圆形之间的间距 */
}

.progress-container .circle-done {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgb(22, 93, 255);
    color: rgb(22, 93, 255);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    margin-right: 10px; /* 调整文字和圆形之间的间距 */
}

.progress-container .circle-ing {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #165DFF;
    color: rgb(255, 255, 255);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    margin-right: 10px; /* 调整文字和圆形之间的间距 */
}

.progress-container .text {
    font-size: 14px;
    color: rgba(3, 3, 3, 0.4);
}

.progress-container .text-done {
    font-size: 14px;
    color: rgba(3, 3, 3, 0.9);
}

.progress-container .text-ing {
    font-size: 14px;
    color: rgba(22, 93, 255, 0.9);
}

.progress-container .separator {
    width: 130px;
    height: 2px;
    background-color: gray;
    margin: 0 10px; /* 调整间距确保分隔符不紧贴其他元素 */
}

.progress-container .separator-done {
    width: 130px;
    height: 2px;
    background-color: rgb(22, 93, 255);
    margin: 0 10px; /* 调整间距确保分隔符不紧贴其他元素 */
}

.el-card__body, .el-main {
    padding: 2px !important;
}

.stepOneWrapper {
    padding: 20px;
}

.contract-file-aside-left {
    overflow-y: hidden;
}

.contract-file-name-list {
    height: 20%;
    border-bottom: 1px solid #EBEEF5;
}

.contract-file-name-list-title {
    height: 20%;
    display: flex;
    align-items: center;
    font-size: 16px;
    padding-left: 20px;
}

.contract-file-name-list-content {
    height: 80%;
    max-height: 80%;
    font-size: 14px;
    overflow-y: auto;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.contract-file-name-list-content::-webkit-scrollbar {
    display: none;
    width: 8px;
}

.contract-file-name-list-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.contract-file-name-list-content::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.contract-file-name-list-content::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.contract-file-name-list-content-name {
    height: 25%;
    display: flex;
    align-items: center;
    padding-left: 30px;
}

.contract-file-name-list-content-name:hover {
    cursor: pointer;
    background-color: #EBF2FD;
    color: #0052D9;
}

.contract-file-name-list-content-name-active {
    height: 25%;
    display: flex;
    align-items: center;
    padding-left: 30px;
    cursor: pointer;
    background-color: #EBF2FD;
    color: #0052D9;
}

.contract-file-small-list {
    height: 80%;
    /*background-color: #66b1ff;*/
}

.contract-file-small-list-title {
    height: 5%;
    font-size: 14px;
    padding-left: 20px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    /*background-color: #9C27B0;*/
}

.contract-file-small-list-content {
    height: 95%;
    /*background-color: #666666;*/
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.contract-file-small-list-content::-webkit-scrollbar {
    display: none;
    width: 8px;
}

.contract-file-small-list-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.contract-file-small-list-content::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.contract-file-small-list-content::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.contract-file-small-list-content-item-wrapper {
    height: 40%;
    margin-top: 10px;
    margin-bottom: 5px;
    /*background-color: #e1f3d8;*/
}

.contract-file-small-list-content-item {
    display: flex;
    height: 90%;
}

.contract-file-small-list-content-item-left {
    width: 60%;
    margin-left: 20px;
    border: 1px solid rgba(3, 3, 3, 0.4);
    /*background-color: #e6a23c;*/
}

.contract-file-small-list-content-item-left-active {
    width: 60%;
    margin-left: 20px;
    border: 1px solid rgba(22, 93, 255, 0.9);
    /*background-color: #e6a23c;*/
}

.contract-file-small-list-content-item-right {
    width: 40%;
    margin-right: 10px;
    /*background-color: #ff4d51;*/
    overflow-y: auto;
    padding-right: 3px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.contract-file-small-list-content-item-right::-webkit-scrollbar {
    display: none;
    width: 8px;
}

.contract-file-small-list-content-item-right::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.contract-file-small-list-content-item-right::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.contract-file-small-list-content-item-right::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.contract-file-small-list-content-item-right-item {
    height: 18%;
    font-size: 12px;
    display: flex;
    align-items: center;
    color: white;
    background-color: rgb(222, 229, 247);
    margin-bottom: 5%;
    border-radius: 0 20px 20px 0;
    position: relative; /* 相对定位，为了定位关闭按钮 */
}

.contract-file-small-list-content-item-right-item-active {
    height: 18%;
    font-size: 12px;
    display: flex;
    align-items: center;
    color: #165DFF;
    background-color: #dce4f4;
    margin-bottom: 5%;
    border-radius: 0 20px 20px 0;
    position: relative; /* 相对定位，为了定位关闭按钮 */
}

.contract-file-small-list-content-item-right-item-close {
    position: absolute;
    top: 0px;
    right: 0px;
    cursor: pointer;
}

.contract-file-small-list-content-item-right-item-close-icon path {
    fill: rgba(0, 0, 0, 0.5); /* 改变内部填充颜色 */
}

/* 悬停父元素，改变子元素的样式 */
.contract-file-small-list-content-item-right-item-close:hover .contract-file-small-list-content-item-right-item-close-icon path {
    fill: red; /* 改变内部填充颜色 */
}


.contract-file-small-list-content-item-page {
    height: 10%;
    width: 100%;
    margin-left: 30%;
    display: flex;
    align-items: center;
    text-align: center;
    font-size: 14px;
    /*background-color: #b3e19d;*/
}

.contract-file-small-list-content-item-page-active {
    height: 10%;
    width: 100%;
    margin-left: 30%;
    display: flex;
    align-items: center;
    text-align: center;
    font-size: 14px;
    color: #165DFF;
}

.contract-file-aside-right {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.contract-file-aside-right .el-tabs__header {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #FFFFFF;
    padding: 0;
}

.contract-file-aside-right::-webkit-scrollbar {
    display: none;
    width: 8px;
}

.contract-file-aside-right::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.contract-file-aside-right::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.contract-file-aside-right::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.contract-file-aside-right .el-tabs__active-bar {
    margin-left: 15px;
}

.contract-file-aside-right .el-tabs__active-bar ~ #tab-addControl {
    margin-left: 15px;
}

.contract-file-aside-right .el-tabs__item.is-active {
    color: #0052D9 !important;
}

.contract-file-aside-right .el-tabs__active-bar {
    background-color: #0052D9 !important;
}

.contract-file-aside-right .el-collapse {
    border: none !important;
}

.contract-file-aside-right .el-collapse-item__header {
    border: none !important;
}

.contract-file-aside-right .right-tab-pane {
    font-size: 16px;
    padding-left: 15px;
    padding-right: 10px;
}

.contract-file-aside-right .right-tab-pane-drag-content {
    padding-left: 6px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* 允许子元素换行 */
}

.right-tab-pane-drag-content .right-tab-pane-drag-content-item {
    width: 30%;
    height: 70px;
    background-color: #F0F8FF;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    word-wrap: break-word;
    word-break: break-word;
    padding: 5px 5px;
    box-sizing: border-box;
    user-select: none;
    cursor: grabbing;
    margin-bottom: 10px;
}

.el-radio-group {
    display: flex;
    flex-direction: column;
    gap: 20px; /* 控制单选框之间的间距 */
}

/* 单个 radio 项目 */
.radio-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 使文本居左 */
}

/* 说明文本的样式 */
.radio-description {
    margin-top: 8px;
    margin-left: 25px;
    font-size: 12px;
    color: #78818D;
}

.right-tab-pane .el-radio__inner {
    width: 18px !important;
    height: 18px !important;
}


.main-file-pane {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 800px; /* 设置父容器的高度 */
    background-color: #f4f4f4;
    position: relative;
}

.a4-container {
    width: 210mm; /* A4纸的宽度 */
    height: 297mm; /* A4纸的高度 */
    background-color: white;
    padding: 10mm;
    border: 1px solid #000;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    transform-origin: top center; /* 缩放时，缩放的原点为顶部居中 */
    transition: transform 0.3s ease;
    max-width: 100%; /* 确保容器不会超出父容器宽度 */
    max-height: 100%; /* 确保容器不会超出父容器高度 */
}

/* 动态调整A4容器的缩放比例 */
@media screen and (max-width: 1200px) {
    .a4-container {
        width: 80%;
        height: auto;
        transform: scale(0.7);
        transform-origin: top center;
    }
}

@media screen and (max-width: 900px) {
    .a4-container {
        width: 70%;
        height: auto;
        transform: scale(0.6);
    }
}
</style>